<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddView">新增视图</el-button>
    <el-table :data="views" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="视图名称"></el-table-column>
      <el-table-column label="节点数量">
        <template #default="scope">
          {{ scope.row.data.nodes.length }}
        </template>
      </el-table-column>
      <el-table-column label="关系数量">
        <template #default="scope">
          {{ scope.row.data.edges.length }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handlePreView(scope.row.id)">预览</el-button>
          <el-button size="small" @click="handleEditView(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDeleteView(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%" :fullscreen="true" :destroy-on-close="true">
      <GraphEditor :isEditing=isEditing :GraphView="GraphView" @save="handleSave" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, toRaw } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus';
import { mockDataStore } from '@/api/mockGraph';
import GraphEditor from './Edit.vue';

const dataStore = mockDataStore;
const views = ref([]);
const dialogVisible = ref(false);
const isEditing = ref(false);
const router = useRouter()

// 当前编辑的视图
const GraphView = ref({
  id: null,
  name: '',
  background: '',
  data: {
    nodes: [],
    edges: []
  },
  options: {
    layout: { hierarchical: { enabled: false, direction: 'UD' } },
    physics: { enabled: true },
    edges: {
      smooth: { enabled: true },
      dashes: false,
      arrows: {
        to: { enabled: true }
      }
    },
    nodes: {
      size: 20,
      font: { size: 14 }
    }
  }
});

// 对话框标题
const dialogTitle = computed(() => {
  return isEditing.value ? '编辑视图' : '新增视图';
});

// 初始化数据
const initData = () => {
  views.value = dataStore.getAllViews();
};

// 处理新增视图
const handleAddView = () => {
  isEditing.value = false;
  GraphView.value = {
    id: null,
    name: '',
    data: {
      nodes: [],
      edges: []
    },
    options: {
      layout: { hierarchical: { enabled: false, direction: 'UD' } },
      physics: { enabled: true },
      edges: {
        smooth: { enabled: true, type: "continuous" },
        dashes: false,
        arrows: {
          to: { enabled: true }
        }
      },
      nodes: {
        size: 20,
        font: { size: 14 }
      }
    }
  };
  dialogVisible.value = true;
};

const handlePreView = (id) => {
  router.push(`/analysis/graph/get?graph_id=${id}`)
};

// 处理编辑视图
const handleEditView = (view) => {
  isEditing.value = true;
  GraphView.value = toRaw(view);
  dialogVisible.value = true;
};

// 处理删除视图
const handleDeleteView = (row) => {
  ElMessageBox.confirm(
    `确定要删除视图 "${row.name}" 吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    dataStore.deleteView(row.id);
    views.value = dataStore.getAllViews();
    ElMessage.success('删除成功');
  }).catch(() => {
    // 用户取消操作
  });
};

// 处理保存视图
const handleSave = () => {
  views.value = dataStore.getAllViews();
  dialogVisible.value = false;
};

// 处理节点更新
const handleUpdateNodes = (nodes) => {
  GraphView.value.nodes = nodes;
};

// 处理边更新
const handleUpdateEdges = (edges) => {
  GraphView.value.edges = edges;
};

// 处理选项更新
const handleUpdateOptions = (options) => {
  GraphView.value.options = options;
};

onMounted(() => {
  initData();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
